<template>
  <el-dialog
    title="新增角色"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="RoleName">
        <el-input v-if="type==1" v-model="ruleForm.RoleName"></el-input>

        <el-select v-else v-model="ruleForm.RoleName" placeholder="请选择角色">
          <el-option label="采购经理" value="shanghai"></el-option>
          <el-option label="采购专员" value="beijing"></el-option>
          <el-option label="财务总监" value="shanghai"></el-option>
          <el-option label="财务专员" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="菜单权限" prop="isChecked">
        <!-- <el-input v-model="ruleForm.isChecked"></el-input> -->
        <el-checkbox v-model="ruleForm.isChecked">全选/全不选</el-checkbox>
      </el-form-item>

      <el-form-item prop="desc">
        <!-- <el-input v-model="ruleForm.isChecked"></el-input> -->
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="ruleForm.desc"
          :rows="10"
          show-word-limit
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <div class="footer">
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          <el-button class="save-btn" @click="submitForm('ruleForm')"
            >保存</el-button
          >
        </div>
      </el-form-item>
    </el-form>

    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="close(0)">取 消</el-button>
      <el-button type="primary" @click="resetForm('ruleForm')">保存</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
export default {
  name: "EditRole",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      type:1,
      ruleForm: {
        RoleName: "",
        isChecked: false,
        desc: "",
      },
      rules: {
        RoleName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    initData(data) {
      this.ruleForm.RoleName = data.RoleName;
      this.type=2;
    },
    close(type) {
      this.$emit("handle", type);
    },
    handleClose() {
      this.$emit("handle", 0);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.close(1);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.close(0);
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  button {
    width: 100px;
    height: 40px;
  }
  .save-btn {
    background-color: rgba(68, 42, 141, 1);
    color: #ffffff;
  }
}
</style>
